<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .container {
            /* border: 1px solid; */
            position: fixed;
            right: 20px;
            bottom: 20px;
            font-size: 0;
            width: 32px;
            height: 100px;
        }

        .container>img {
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="./♥/灰心.jpg" alt="">
    </div>
    <script>
         const div = document.querySelector('div');// div
        const defaultImg = document.querySelector('img'); // 灰色的img

        const arr = ['./♥/红心.png', './♥/黄心.png', './♥/蓝心.png'];

        div.onclick = function () {
            let count = 0;// 计数 出现几个心
            let countTimer = setInterval(function () {
                if (count < 5) {// 
                    count++;
                    // 每个心的生成和抖动
                    let i = 0;
                    let img = document.createElement('img');
                    img.src = `${arr[random(2)]}`; // 随机的颜色的图片
                    div.appendChild(img);
                    let timer = setInterval(function () {
                        if (i > 50) {
                            div.removeChild(img);
                            clearInterval(timer);
                        }
                        img.style.cssText = `
                            transform: rotate(${random(-45, 45)}deg);
                            bottom: ${i += 5}px;
                        `;
                    }, 200);

                } else {
                    clearInterval(countTimer);
                }
            }, 1000);
        }
        // 随机数装封
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }
    </script>
</body>

</html>